<template>
  <div id="root">
    <button @click="getStudents()">获取学生信息</button>
    <button @click="getCars()">获取汽车信息</button>
  </div>
</template>

<script>
// 使用发布订阅的js库，一般情况下，第三方的库放在上面，自己的组件库放到下面

// 第一步：引入组件，其中在脚手架里面，后缀.vue写不写都可以

import axios from "axios";

export default {
  name: 'App',
  // 第二步：注册组件
  // 使用对象写法
  components: {},
  data() {
    return {
      msg: '欢迎学习Vue',

    }
  },
  methods: {
    // 获取学生信息
    getStudents() {
      console.log(this.msg);
      axios.get('http://localhost:8080/api/students').then(response => {
        console.log(JSON.stringify(response.data));
      }, err => {
        console.log('请求失败了：', err.message);
      });
    },
    // 获取汽车信息
    getCars() {
      console.log(this.msg);
      axios.get('http://localhost:8080/demo/cars').then(response => {
        console.log(JSON.stringify(response.data));
      }, err => {
        console.log('请求失败了：', err.message);
      });
    }
  }


}
</script>

<style>
</style>